/* eslint-disable vue/no-use-v-if-with-v-for */
<template>
  <div class="container">
    <!--mescroll滚动区域的基本结构,为避免id重复导致的多次初始化,这里使用ref-->
    <div class="defer">
      <van-loading class="loading" v-if="loadingFlag" />
      <me-scroll ref="mescroll" :down="meScrollDown" :up="meScrollUp" @init="meScrollInit" v-else>
        <div class="banner-swipe">
          <van-swipe :autoplay="5000">
            <van-swipe-item v-for="(image, index) in bannerList" :key="index">
              <img class="banner-img" :src="image.url" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="flex-card">
          <ul class="ul-flex">
            <li class="first-li" id="myMeetingId">
              <div class="line"><span class="my-icon">我的会议</span></div>
              <p class="explain">今天待参加会议{{ todayCongressCount }}场</p>
            </li>
            <li class="second-li">|</li>
            <li class="third-li">
              <div class="line"><span class="meeting-icon">会议日程</span></div>
              <p class="explain">本月会议{{ monthCongressCount }}场</p>
            </li>
          </ul>
        </div>
        <div id="filter">
          <aside class="filter">
            <ul class="screening-li">
              <li class="hot-tag">热门推荐</li>
              <li class="screening" @click="filtrate">
                筛选
                <span class="arrow-screening"></span>
              </li>
            </ul>
          </aside>
        </div>
        <div class="tag-content" @click="hotTagInfo">
          <span
            class="tag"
            :class="{ isTag: index === tagIndex }"
            v-for="(item, index) in recommendLabelList"
            :key="item.key"
            :tag-index="index"
            :tag-item="item"
          >
            {{ item.name }}&nbsp;({{ item.congressCount }})
          </span>
        </div>
        <div class="list-content">
          <meeting-card v-for="item in congressList" :key="item.key" :meetingInfo="item" />
          <div class="no-meeting" v-if="congressList.length === 0">
            <span class="nothing-icon"></span>
            <p>暂无会议</p>
          </div>
        </div>
      </me-scroll>
    </div>
    <van-popup v-model="popupFlag" position="top" :lock-scroll="false" @click-overlay="clickOverlay">
      <ul class="simulate">
        <li class="hot-tags">热门推荐</li>
        <li class="screenings" @click="filtrate">
          筛选
          <span class="arrow-screening-select"></span>
        </li>
      </ul>
      <div class="rank">
        <section>
          <ul class="title-flex">
            <li class="title-left">科室</li>
            <li class="title-right" @click="allSectionTag">
              <span class="title-length">{{ labelDepartment }}</span>
              <span class="my-down" v-if="tagSectionNum === 9 && tagSection.length > 8"></span>
              <span class="my-up" v-if="tagSectionNum !== 9 && tagSection.length > 8"></span>
            </li>
          </ul>
          <ul class="section">
            <li
              :class="{ isSelect: sectionTagNameList[index] }"
              v-for="(item, index) in tagSection"
              :key="item.key"
              @click="sectionTagTab(index, tagSection.length)"
            >
              <p v-if="index < tagSectionNum">{{ item.name }}</p>
            </li>
          </ul>
        </section>
        <section>
          <ul class="title-flex">
            <li class="title-left">地区</li>
            <li class="title-right" @click="allAreaTag">
              <span class="title-length">{{ areaTagName }}</span>
              <span class="my-down" v-if="tagAreaNum === 9 && tagArea.length > 8"></span>
              <span class="my-up" v-if="tagAreaNum !== 9 && tagArea.length > 8"></span>
            </li>
          </ul>
          <ul class="section">
            <li
              :class="{ isSelect: selectAreaTagList[index] }"
              v-for="(item, index) in tagArea"
              :key="item.key"
              @click="areaTagTab(index, tagArea.length)"
            >
              <p v-if="index < tagAreaNum">{{ item }}</p>
            </li>
          </ul>
        </section>
        <section>
          <ul class="title-flex">
            <li class="title-left">时间</li>
            <li class="title-right" @click="allTimeTag">
              <span class="title-length">{{ timeTagName }}</span>
              <span class="my-down" v-if="tagTimeNum === 9 && tagTime.length > 8"></span>
              <span class="my-up" v-if="tagTimeNum !== 9 && tagTime.length > 8"></span>
            </li>
          </ul>
          <ul class="section">
            <li
              :class="{ isSelect: selectTimeTagList[index] }"
              v-for="(item, index) in tagTime"
              :key="item.key"
              @click="timeTagTab(index, tagTime.length)"
            >
              <p v-if="index < tagTimeNum">{{ item }}</p>
            </li>
          </ul>
        </section>
        <section>
          <ul class="title-flex">
            <li class="title-left">自定义标签</li>
            <li class="title-right" @click="allDefinedTag">
              <span class="title-length">{{ definedTagName }}</span>
              <span class="my-down" v-if="tagDefinedNum === 9 && tagDefined.length > 8"></span>
              <span class="my-up" v-if="tagDefinedNum !== 9 && tagDefined.length > 8"></span>
            </li>
          </ul>
          <ul class="section">
            <li
              :class="{ isSelect: selectDefinedTagList[index] }"
              v-for="(item, index) in tagDefined"
              :key="item.key"
              @click="definedTagTab(index, tagDefined.length)"
            >
              <p v-if="index < tagDefinedNum">{{ item.name }}</p>
            </li>
          </ul>
        </section>
      </div>
      <ul class="bottom-btn">
        <li class="btn-flex" @click="reset"><span class="reset-btn">重置</span></li>
        <li class="btn-flex-line"></li>
        <li class="btn-flex" @click="submit"><span class="submit-btn">确定</span></li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import MeetingCard from './meeting-card';
import MeScroll from '@/components/MeScroll';
import filtrate from '@/mock/filtrate';
import { Swipe, SwipeItem, Popup, Loading } from 'vant';

export default {
  components: {
    MeetingCard,
    MeScroll,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Popup.name]: Popup,
    [Loading.name]: Loading
  },
  data() {
    return {
      loadingFlag: true, //延迟渲染页面(图片过多安卓会掉帧)
      meScroll: null, // mescroll实例对象
      meScrollDown: {
        callback: this.downCallback
      },
      meScrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback
      },
      bannerList: [], //banner图列表
      todayCongressCount: 0, //今天会议
      monthCongressCount: 0, //本月会议
      congressList: [], //会议列表
      recommendLabelList: [], //推荐标签
      tagIndex: '', //点击标签
      tagSection: [], //筛选科室
      tagArea: [], //筛选地区
      tagTime: [], //筛选时间
      tagDefined: [], //筛选自定义标签
      popupFlag: false, //筛选弹出标识
      tagSectionNum: 9, //科室标签显示数量
      sectionTagNameList: ['全部'], //当前选中科室标签
      labelDepartment: '全部', //科室标签显示(数组转字符串)
      deptLabel: [], //已选科室标签
      tagAreaNum: 9, //地区标签显示数量
      selectAreaTagList: ['全部'], //当前选中地区标签
      areaTagName: '全部', //地区标签显示(数组转字符串)
      areaLabel: [], //已选地区标签
      tagTimeNum: 9, //时间标签显示数量
      selectTimeTagList: ['全部'], //当前选中时间标签
      timeTagName: '全部',
      timeLabel: [], //已选自定义标签
      tagDefinedNum: 9, //自定义标签显示数量
      selectDefinedTagList: ['全部'], //当前选中自定义标签
      definedTagName: '全部', //自定义标签显示(数组转字符串)
      definedLabel: [] //已选自定义标签
    };
  },
  created() {
    setTimeout(() => {
      this.loadingFlag = false;
    }, 300);
  },
  mounted() {
    this.bannerList = filtrate.bannerList;
    this.todayCongressCount = filtrate.todayCongressCount;
    this.monthCongressCount = filtrate.monthCongressCount;
    this.recommendLabelList = filtrate.recommendLabelList;
    //会议列表
    this.congressList = filtrate.congressList;
    this.$nextTick(() => {
      setTimeout(() => {
        this.meScroll.endBySize(this.congressList.length, 50);
      }, 600);
    });
    //筛选条件数据
    this.tagSection = filtrate.office;
    this.tagArea = filtrate.area;
    this.tagTime = filtrate.time;
    this.tagDefined = filtrate.custom;
  },
  methods: {
    // mescroll组件初始化的回调,可获取到mescroll对象
    meScrollInit(mescroll) {
      this.meScroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    downCallback() {
      this.tagIndex = '';
      this.deptLabel = [];
      this.areaLabel = [];
      this.timeLabel = [];
      this.definedLabel = [];
      this.labelDepartment = '全部';
      this.areaTagName = '全部';
      this.timeTagName = '全部';
      this.definedTagName = '全部';
      this.congressList = [];
      this.meScroll.resetUpScroll();
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page) {
      let params = {
        pageSize: page.size,
        pageIndex: page.num
      };
      params = this.condition(params);
      console.log(params);
      this.congressList = this.congressList.concat(filtrate.congressList || []);
      // 数据渲染成功后,隐藏下拉刷新的状态
      this.$nextTick(() => {
        setTimeout(() => {
          this.meScroll.endBySize(this.congressList.length, 50);
        }, 600);
      });
    },
    hotTagInfo(event) {
      debugger;
      console.log(event.target.getAttribute('tag-index'));
      console.log(event.target.getAttribute('tag-item'));
      // if (this.tagIndex === index) {
      //     this.tagIndex = '';
      //     // this.congressList = filtrate.congressList;
      //     // this.$nextTick(() => {
      //     //     setTimeout(() => {
      //     //         this.meScroll.endBySize(this.congressList.length, 50);
      //     //     }, 600)
      //     // });
      //     return;
      // }
      // this.tagIndex = index;
      // this.congressList = filtrate.congressList;
      // this.$nextTick(() => {
      //     setTimeout(() => {
      //         this.meScroll.endBySize(this.congressList.length, 50);
      //     }, 600)
      // });
    },
    filtrate() {
      if (!this.popupFlag) {
        document.getElementById('filter').scrollIntoView();
        this.popupFlag = true;
        document.getElementsByTagName('html')[0].style.overflow = 'hidden';
        document.body.style.overflow = 'hidden';
      } else {
        this.popupFlag = false;
        document.getElementsByTagName('html')[0].style.overflow = '';
        document.body.style.overflow = '';
      }
    },
    clickOverlay() {
      this.popupFlag = false;
      document.getElementsByTagName('html')[0].style.overflow = '';
      document.body.style.overflow = '';
    },
    allSectionTag() {
      this.tagSectionNum = this.tagSectionNum === 9 ? this.tagSection.length : 9;
    },
    allAreaTag() {
      this.tagAreaNum = this.tagAreaNum === 9 ? this.tagArea.length : 9;
    },
    allTimeTag() {
      this.tagTimeNum = this.tagTimeNum === 9 ? this.tagTime.length : 9;
    },
    allDefinedTag() {
      this.tagDefinedNum = this.tagDefinedNum === 9 ? this.tagDefined.length : 9;
    },
    reset() {
      this.sectionTagNameList = ['全部'];
      this.labelDepartment = '全部';
      this.deptLabel = [];
      this.selectAreaTagList = ['全部'];
      this.areaTagName = '全部';
      this.areaLabel = [];
      this.selectTimeTagList = ['全部'];
      this.timeTagName = '全部';
      this.timeLabel = [];
      this.selectDefinedTagList = ['全部'];
      this.definedTagName = '全部';
      this.definedLabel = [];
    },
    submit() {
      this.popupFlag = false;
      document.getElementsByTagName('html')[0].style.overflow = '';
      document.body.style.overflow = '';
      this.tagIndex = '';
      let params = {
        pageSize: 10,
        pageIndex: 0
      };
      params = this.condition(params);
      console.log(params);
      this.congressList = filtrate.congressList || [];
      // 数据渲染成功后,隐藏下拉刷新的状态
      this.$nextTick(() => {
        this.meScroll.endBySize(this.congressList.length, 50);
      });
    },
    condition(params) {
      if (this.deptLabel && this.deptLabel.length) {
        //科室标签名称
        params.deptLabel = this.deptLabel;
      }
      if (this.areaLabel && this.areaLabel.length) {
        //地区标签名称
        params.areaLabel = this.areaLabel;
      }
      if (this.timeLabel && this.timeLabel.length) {
        //时间标签名称
        params.timeLabel = this.timeLabel;
      }
      if (this.definedLabel && this.definedLabel.length) {
        //自定义标签名称
        params.customLabel = this.definedLabel;
      }
      return params;
    },
    sectionTagTab(index, length) {
      if (this.sectionTagNameList.length === 1) {
        this.sectionTagNameList = [];
      }
      if (!index) {
        this.sectionTagNameList = ['全部'];
        this.labelDepartment = '全部';
        this.deptLabel = [];
        return;
      }
      this.sectionTagNameList.length = length;
      this.sectionTagNameList.splice(index, 1, !this.sectionTagNameList[index]);
      let arr = [];
      for (let i = 0; i < this.sectionTagNameList.length; i++) {
        if (this.sectionTagNameList[i] && this.sectionTagNameList[i] !== '全部') {
          arr.push(this.tagSection[i].name);
        }
      }
      this.labelDepartment = arr.join('、') || '全部';
      if (this.labelDepartment === '全部') {
        this.sectionTagNameList = ['全部'];
      }
      this.deptLabel = arr;
    },
    areaTagTab(index, length) {
      if (this.selectAreaTagList.length === 1) {
        this.selectAreaTagList = [];
      }
      if (!index) {
        this.selectAreaTagList = ['全部'];
        this.areaTagName = '全部';
        this.areaLabel = [];
        return;
      }
      this.selectAreaTagList.length = length;
      this.selectAreaTagList.splice(index, 1, !this.selectAreaTagList[index]);
      let arr = [];
      for (let i = 0; i < this.selectAreaTagList.length; i++) {
        if (this.selectAreaTagList[i] && this.selectAreaTagList[i] !== '全部') {
          arr.push(this.tagArea[i]);
        }
      }
      this.areaTagName = arr.join('、') || '全部';
      if (this.areaTagName === '全部') {
        this.selectAreaTagList = ['全部'];
      }
      this.areaLabel = arr;
    },
    timeTagTab(index, length) {
      if (this.selectTimeTagList.length === 1) {
        this.selectTimeTagList = [];
      }
      if (!index) {
        this.selectTimeTagList = ['全部'];
        this.timeTagName = '全部';
        this.timeLabel = [];
        return;
      }
      this.selectTimeTagList.length = length;
      this.selectTimeTagList.splice(index, 1, !this.selectTimeTagList[index]);
      let arr = [];
      for (let i = 0; i < this.selectTimeTagList.length; i++) {
        if (this.selectTimeTagList[i] && this.selectTimeTagList[i] !== '全部') {
          arr.push(this.tagTime[i]);
        }
      }
      this.timeTagName = arr.join('、') || '全部';
      if (this.timeTagName === '全部') {
        this.selectTimeTagList = ['全部'];
      }
      this.timeLabel = arr;
    },
    definedTagTab(index, length) {
      if (this.selectDefinedTagList.length === 1) {
        this.selectDefinedTagList = [];
      }
      if (!index) {
        this.selectDefinedTagList = ['全部'];
        this.definedTagName = '全部';
        this.definedLabel = [];
        return;
      }
      this.selectDefinedTagList.length = length;
      this.selectDefinedTagList.splice(index, 1, !this.selectDefinedTagList[index]);
      let arr = [];
      for (let i = 0; i < this.selectDefinedTagList.length; i++) {
        if (this.selectDefinedTagList[i] && this.selectDefinedTagList[i] !== '全部') {
          arr.push(this.tagDefined[i].name);
        }
      }
      this.definedTagName = arr.join('、') || '全部';
      if (this.definedTagName === '全部') {
        this.selectDefinedTagList = ['全部'];
      }
      this.definedLabel = arr;
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  background: #fff;
}

.defer {
  height: 100vh;
}

.loading {
  position: absolute;
  top: 42%;
  left: 42%;
  transform: translate(50%, 50%);
}

.banner-swipe {
  height: 40vw;
  .banner-img {
    width: 100%;
    height: 40vw;
  }
}

.flex-card {
  position: relative;
  top: -2vw;
  left: 4vw;
  background: #fff;
  height: 21.3vw;
  width: 92vw;
  border-radius: 4px;
  padding: 22px 14px 0 14px;
  box-shadow: 0 2px 4px 0 #eee;
}

.ul-flex {
  display: flex;
  font-size: 3.73vw;
  color: #333;
  text-align: center;
  .explain {
    font-size: 3.2vw;
    color: #999;
    margin-top: 4px;
  }
  .line {
    font-size: 3.73vw;
    color: #333;
  }
  .first-li {
    flex: 1;
    .my-icon {
      background: url('../../assets/imgs/mine_meeting.svg') no-repeat 0 center;
      padding-left: 20px;
    }
  }
  .second-li {
    flex: 0 0 1px;
    color: #eee;
    margin-top: 10px;
  }
  .third-li {
    flex: 1;
    .meeting-icon {
      background: url('../../assets/imgs/meeting_schedule.svg') no-repeat 0 center;
      padding-left: 20px;
    }
  }
}

.filter {
  position: relative;
  height: 45px;
  line-height: 44px;
  .screening-li {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 44px;
    display: flex;
    font-size: 14px;
    color: #666;
    background-color: #fff;
    .arrow-screening {
      display: inline-block;
      width: 14px;
      height: 12px;
      background: url('../../assets/imgs/icon_filter.svg') no-repeat;
      background-size: cover;
    }
    .hot-tag {
      flex: 0 0 140px;
      font-size: 16px;
      color: #171717;
      font-weight: bold;
      margin-left: 12px;
    }
    .screening {
      flex: 1;
      text-align: right;
      margin-right: 20px;
    }
  }
}

.tag-content {
  padding: 0 12px;
  margin-top: 1px;
  .tag {
    display: inline-block;
    height: 7.47vw;
    line-height: 7.47vw;
    font-size: 3.2vw;
    color: #171717;
    border: 1px solid #ccc;
    padding: 0 12px;
    border-radius: 4px;
    margin: 0 8px 8px 0;
  }
  .isTag {
    background: #4ba7f7;
    color: #fff;
    border: 1px solid #fff;
  }
}

.list-content {
  margin-top: 8px;
  .no-meeting {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10vh;
    padding-bottom: 15vh;
    background: #fff;
    .nothing-icon {
      flex: 1;
      width: 225px;
      height: 148px;
      background: url('../../assets/imgs/no_meeting.svg') no-repeat;
      background-size: cover;
    }
    & > p {
      flex: 1;
      font-size: 14px;
      color: #999;
      margin-top: 12px;
    }
  }
}

.simulate {
  display: flex;
  width: 100%;
  height: 44px;
  line-height: 44px;
  background: #fff;
  z-index: 100;
  border-bottom: 1px solid #eceff2;
  & > li {
    flex: 1;
  }
  .hot-tags {
    flex: 0 0 140px;
    font-size: 4.27vw;
    color: #171717;
    font-weight: bold;
    margin-left: 12px;
  }
  .screenings {
    flex: 1;
    font-size: 3.73vw;
    color: #4ba7f7;
    text-align: right;
    margin-right: 20px;
  }
  .arrow-screening-select {
    display: inline-block;
    width: 3.73vw;
    height: 3.2vw;
    background: url('../../assets/imgs/icon_filter_select.svg') no-repeat;
    background-size: cover;
  }
}

.rank {
  width: 100%;
  height: 74vh;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #fff;
  padding: 8px 0 8px 12px;
  .title-flex {
    display: flex;
    height: 32px;
    line-height: 32px;
    .title-left {
      flex: 0 0 22vw;
      font-size: 3.73vw;
      color: #171717;
      font-weight: bold;
    }
    .title-right {
      display: flex;
      flex: 1;
      margin-right: 10px;
      text-align: right;
      font-size: 3.2vw;
      color: #999;
      .title-length {
        flex: 0 0 69vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .my-down {
        flex: 1;
        background: url('../../assets/imgs/arrow_down.svg') no-repeat 0 center;
        padding-left: 16px;
      }
      .my-up {
        flex: 1;
        background: url('../../assets/imgs/arrow_up.svg') no-repeat 0 center;
        padding-left: 16px;
      }
    }
  }
  .section {
    width: 100%;
    overflow: hidden;
    zoom: 1;
    text-align: center;
    & > li {
      float: left;
      width: 30%;
      font-size: 3.73vw;
      color: #171717;
      border: 1px solid #ccc;
      border-radius: 3px;
      margin-right: 3.2vw;
      margin-bottom: 10px;
      & > p {
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.bottom-btn {
  width: 100%;
  display: flex;
  height: 50px;
  line-height: 50px;
  font-size: 4.27vw;
  color: #171717;
  background: #fff;
  text-align: center;
  border-top: 1px solid #f8f8f8;
  z-index: 2;
  .btn-flex {
    flex: 1;
    .reset-btn {
      height: 32px;
      line-height: 32px;
    }
    .submit-btn {
      height: 32px;
      line-height: 32px;
      color: #4ba7f7;
    }
  }
  .btn-flex-line {
    flex: 0 0 1px;
    height: 20px;
    background: #ddd;
    align-self: center;
  }
}

.isSelect {
  background: #4ba7f7;
  color: #fff !important;
  border: 1px solid #fff !important;
}
</style>
